import React from 'react';
import {Navigate, useLocation, useNavigate, useParams, useRoutes, useSearchParams} from "react-router-dom";
import Search from "../pages/search/Search";

function AppRouter(props) {
    return (
        useRoutes([
            {
                path: "/home",
                element: lazyLoad('Home/Home')
            },
            {
                path: "/search",
                // element: lazyLoad("search/Search"),
                element: <Search/>,
                children:[
                    {
                        path:"songs",
                        // element:React.memo(lazyLoad('search/Songs/Songs')),
                        element:lazyLoad('search/Songs/Songs'),
                    },
                    {
                        path:"artists",
                        element: lazyLoad("search/Artists/Artists")
                    },
                    {
                        path:"videos",
                        element: lazyLoad("search/Videos/Videos")
                    },
                    {
                        path:"users",
                        element: lazyLoad("search/Users/Users")
                    },
                ]
            },
            {
                path: "*",
                element: <Navigate to={"/home"}/>
            }
        ])
    )
}

function lazyLoad(path){
    const Components = React.memo(withRouter(React.lazy(()=>import(`../pages/${path}`))))
    return(
        <React.Suspense>
            <Components key={`../pages/${path}`}/>
        </React.Suspense>
    )
}

export function withRouter(Component) {
    return function(props){
        const push =  useNavigate()
        const match =  useParams()
        const location =  useLocation()
        const [searchParams,setSearchParams] = useSearchParams()
        return <Component  {...props} history={{push,match,location,searchParams,setSearchParams}}/>
    }
}

export default AppRouter;

// function GetRoutes(props){
//
//     return (
//         useRoutes([
//             {
//                 path: "/home",
//                 element: lazyLoad('Home/Home')
//             },
//             {
//                 path: "/search:id",
//                 element: lazyLoad("search/Search")
//             },
//             {
//                 path: "*",
//                 element: <Navigate to={"/home"}/>
//             }
//         ])
//     )
//
//
// }